<template>
	<view>
		<view style="padding: 15px;">
			<view style="color: red;">
				温馨提示
			</view>
			<view style="color: #999;font-size: 13px;">
				1、请依法合规开具发票，并且提供准确的开票信息；
			</view>
			<view style="color: #999;font-size: 13px;">
				2、发票2-3日内开具；
			</view>
		</view>

		<!-- 	<view style="background-color: #fff;display: flex;padding:5px 15px;align-items: center;" @click="$util.redirectTo('/pages_tool/invoice/invoice-title')">
			<text class="icondiy icon-system-add-circle-line" style="color: green;font-size:25px;"></text>
			<view style="padding-left: 5px;font-weight: bold;">添加发票抬头</view>
		</view> -->


		<view style="background-color: #fff;">
			<view style="padding: 5px 15px;border-bottom: 1px solid #eee;">
				选择发票抬头
			</view>
			<view style="display: flex;border-bottom: 1px solid #eee;padding:10px 15px;" v-if="postData.default"
				@click="$util.redirectTo('/pages_tool/invoice/invoice-title')">
				<view style="width: 95%;">
					<view style="font-weight: bold;">
						{{postData.default.name}}
					</view>
					<view style="font-size: 12px;color: #666;">
						{{postData.default.invoice_type_cn}}
					</view>
				</view>
				<view style="width: 5%;padding-top: 8px;">
					<text class="iconfont icon-right " style="color: #a8a8a8;font-size: 18px;"></text>
				</view>
			</view>
			<view v-else style="height: 96rpx;">
				<!-- 添加发票 -->
				<view @click="$util.redirectTo('/pages_tool/invoice/invoice-title')" style="width: 104px;
					margin: 20rpx auto 20rpx auto;
					text-align: center;
					background: #03A9F4;
					color:#FFFFFF;
					padding: 15rpx 0;
					border-radius: 8rpx;">
					选择发票抬头
				</view>
			</view>
		</view>

		<view
			style="display: flex;align-items: center;justify-content: space-between;border-top:10px solid #f5f5f5;background-color: #fff;padding: 10px;">
			<view style="display: flex;align-items: center;">
				<view style="width: 2px;height:15px;border-radius: 2px;background-color: #ff5500;"></view>
				<view style="padding-left: 5px;">可开票订单
					<text style="font-size: 12px;color: #999;">（点击下方订单可进行开票操作）</text>
				</view>
			</view>
			<view style="font-weight: bold;color: blue;font-size: 15px;"
				@click="$util.redirectTo('/pages_tool/invoice/invoice-history')">开票历史</view>
		</view>

		<view class="" v-if="postData.count > 0">
			<view style="background-color: #fff;border-top: 1px solid #eee;padding: 15px;display: flex;justify-content:space-between;"
				v-for="(item, index) in postData.list" :key="index" @click="getNowInfo(item)">
				<view>
					<view style="font-weight: bold;">订单号：{{item.order_no}}</view>
					<view style="color: #666;" v-for="(itm,idx) in item.goods_list" :key="idx">
						{{itm.sku_name}} x{{itm.num}} ¥{{itm.goods_money}}
					</view>
					<view style="font-size: 12px;color: #999;">
						下单时间：{{item.pay_time}} 
					</view>
					<view style="font-size: 12px;color: #999;">
						订单金额：{{item.goods_money}}元
					</view>
				</view>
				<view class="button">申请开票</view>
			</view>
			<uv-load-more :status="status" />
		</view>

		<view v-else style="color: #999;padding-top: 50%;text-align: center;">
			暂无可以开票的订单
		</view>

		<view style="height: 80rpx;"></view>


		<!-- 开票弹窗 -->
		<uni-popup ref="invoicePopup">
			<view style="background-color: #fff;width: 300px;padding-bottom: 15px ;">
				<view style="padding: 15px;font-weight: bold;text-align: center;font-size: 16px;">开票确认</view>
				<view style="padding: 0 15px;">
					<view style="display: flex;align-items: center;padding: 5px 0;">
						<text style="color: #999;">发票类型：</text>
						<view class="">
							<radio-group @change="onTypeChange" style="display: flex;align-items: center;">
								<label>
									<radio :value="0" :checked="fapiaoInfo.is_tax_invoice == 0"
										style="transform: scale(0.7);" />
									普通发票
								</label>
								<label style="margin-left: 10px;">
									<radio :value="1" :checked="fapiaoInfo.is_tax_invoice == 1"
										style="transform: scale(0.7);" />
									专用发票
								</label>
							</radio-group>
						</view>
					</view>
					<view style="padding: 5px 0;">
						<text style="color: #999;">抬头类型：</text>
						<text style="font-weight: bold;">{{fapiaoInfo.invoice_type_cn}}</text>
					</view>
					<view style="padding: 5px 0;">
						<text style="color: #999;">发票抬头：</text>
						<text style="font-weight: bold;">{{fapiaoInfo.name}}</text>
					</view>
					<view style="padding: 5px 0;" v-if="fapiaoInfo.company_idcard">
						<text style="color: #999;">发票税号：</text>
						<text style="font-weight: bold;">{{fapiaoInfo.company_idcard}}</text>
					</view>
					<view style="padding: 5px 0;">
						<text style="color: #999;">开票金额：</text>
						<text style="font-weight: bold;">¥{{fapiaoInfo.money}}</text>
					</view>
				</view>
				<view style="background-color: #f5f5f5;color: red;margin: 10px 0;font-size: 12px;padding: 15px;">
					发票开具成功后不可撤销，请您仔细核对开票信息
				</view>
				<view style="display: flex;font-weight: bold;">
					<view style="width: 50%;text-align: center;font-size: 16px;" @click="$refs.invoicePopup.close()">
						取消
					</view>
					<view @click="submit(fapiaoInfo)" style="width: 50%;text-align: center;color: red;border-left: 1px solid #eee;font-size: 16px;">
						确认
					</view>
				</view>
			</view>
		</uni-popup>


	</view>
</template>

<script>
export default {
	data() {
		return {
			status: 'loadmore',
			limit: 10,
			page: 1,
			maxpage: 1,
			// invoiceType: 'putong',
			postData: [],
			fapiaoInfo:{}
		}
	},
	onLoad() {
		this.init()
	},
	onShow:function(e){
		let pages = getCurrentPages();
		let currPage = pages[pages.length-1];
		this.postData.default = currPage.data.setDefault;
	},
	onReachBottom() {
		if (this.page >= this.postData.page_count) {
			this.status = 'nomore'
		} else {
			this.status = 'loading';
			this.page = ++this.page;
			this.init();
		}
	},
	methods: {
		getNowInfo(row){
			console.log('row',row);
			console.log(this.postData.default);
			if(this.postData.default){
				this.fapiaoInfo = {
					order_id:row.order_id,
					invoice_id:this.postData.default.id,
					name:this.postData.default.name,
					invoice_type_cn:this.postData.default.invoice_type_cn,
					company_idcard:this.postData.default.company_idcard,
					money:row.goods_money,
					is_tax_invoice:0
				};
				this.$refs.invoicePopup.open()
			}else{
				uni.showToast({
					icon:'none',
					title: '请选择发票抬头',
					duration: 2000
				});
			}
			
		},
		// 切换开票类型
		onTypeChange(e) {
			this.fapiaoInfo.is_tax_invoice = e.detail.value;
		},
		init() {
			this.$api.sendRequest({
				url: '/api/order/getUnInvoiceOrder',
				data: {
					page: this.page,
					limit: this.limit
				},
				success: res => {
					if (this.page == 1) {
						this.postData = res.data;
					} else {
						this.postData.list = this.postData.list.concat(res.data.list);
					}

				}
			})
		},
		submit(row){
			let that = this;
			that.$api.sendRequest({
				url: '/api/order/confirmInvoice',
				data: {
					order_id: row.order_id,
					invoice_id: row.invoice_id,
					is_tax_invoice:row.is_tax_invoice
				},
				success: res => {
					that.$refs.invoicePopup.close()
					uni.showModal({
						title: '提示',
						content: '开票申请提交成功',
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								that.init()
							}
						}
					});
					
				}
			})
		}
	}
}
</script>

<style>
	.button{
		background-color: #ff5500;
		color: #ffffff;
		border-radius: 10rpx;
		width: 130rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}
</style>